<template>
    <div class="addUserAuth-container">
        <b-container class="bv-example-row row-box">
            <!-- 支付成功区域 -->
            <b-row align-h="center" class="my-userAuthInfo">
                <b-col cols="12" sm="12" md="12" lg="12">
                    <Alert type="success">{{msg}}</Alert>
                    <div class="success-info">
                      <router-link to="/goodsList" class="pright">继续购物</router-link>
                      <router-link to="/myBuyOrders" class="pleft">查看订单详情</router-link>
                    </div>
                </b-col>
            </b-row>
            <!-- 买了又买区域 -->
            <div class="one-floor">
                <b-row align-h="center">
                    <b-col cols="4" class="contain-title">
                        <h1 class="titleLine">买了又买</h1>
                    </b-col>
                </b-row>
                <b-row align-h="center">
                    <b-col cols="6" sm="6" md="3" lg="3" v-for="item in goodsList" :key="item.gId">
                        <Card>
                            <div class="box-item">
                                <router-link :to="'/goodsInfo/' + item.gId">
                                    <img :src="item.mainPic">
                                </router-link>
                                <div class="box-item-text">
                                    <h5><router-link :to="'/goodsInfo/' + item.gId" class="goods-title">{{item.gTitle}}</router-link></h5>
                                    <div class="goods-item">
                                        <span class="goods-price">￥{{item.gPrice}}</span>
                                        <span class="view-num"><Icon type="ios-eye" />{{item.gViewNum}} 浏览</span>
                                    </div>
                                    <div class="user-info">
                                        <router-link :to="'/userInfo/' + item.users.uId">
                                        <img :src="item.users.uAvatar" alt=""></router-link>
                                        <p class="user-name">{{item.users.uName}}</p>
                                    </div>
                                </div>
                            </div>
                        </Card>
                    </b-col>
                </b-row>
            </div>
        </b-container>
    </div>
</template>

<script>
export default {
  name: 'returnUrl',
  data () {
    return {
      app_id: this.$route.query.app_id,
      auth_app_id: this.$route.query.auth_app_id,
      charset: this.$route.query.charset,
      method: this.$route.query.method,
      out_trade_no: this.$route.query.out_trade_no,
      seller_id: this.$route.query.seller_id,
      sign: this.$route.query.sign,
      sign_type: this.$route.query.sign_type,
      timestamp: this.$route.query.timestamp,
      total_amount: this.$route.query.total_amount,
      trade_no: this.$route.query.trade_no,
      version: this.$route.query.version,
      msg: '',
      gId: 0,
      orderList: [],
      goodsList: []
    }
  },
  created () {
    this.returnUrl()
    this.findByParentNo()
  },
  methods: {
    // 支付成功回调
    returnUrl () {
      this.$axios({
        url: 'alipay/returnUrl/',
        method: 'get',
        params: {
          app_id: this.app_id,
          auth_app_id: this.auth_app_id,
          charset: this.charset,
          method: this.method,
          out_trade_no: this.out_trade_no,
          seller_id: this.seller_id,
          sign: this.sign,
          sign_type: this.sign_type,
          timestamp: this.timestamp,
          total_amount: this.total_amount,
          trade_no: this.trade_no,
          version: this.version
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.msg = res.data.msg
        } else if (res.data.code === 400) {
          this.msg = res.data.msg
        }
      })
    },
    // 根据总订单编号查询相关订单列表
    findByParentNo () {
      this.$axios({
        url: 'orders/findByParentNo/' + this.out_trade_no,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('adminToken')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.orderList = res.data.list
          this.gId = this.orderList[0].oGid
          this.findRecommend(this.gId)
        }
      })
    },
    // 查询购买商品成功后的推荐商品
    findRecommend (gId) {
      this.$axios({
        url: 'goods/findRecommend/',
        method: 'get',
        params: {
          uId: JSON.parse(localStorage.getItem('user')).uId,
          gId: gId
        },
        headers: {
          Authorization: localStorage.getItem('adminToken')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.goodsList = res.data.list
          this.goodsList.forEach(item => {
            this.$axios({
              url: 'goodsPicture/findMainPicByGoodsId/' + item.gId,
              method: 'get'
            }).then(res => {
              if (res.data.code === 200) {
                // vue给对象新增属性并触发视图更新
                this.$set(item, 'mainPic', res.data.object.gpAddress)
              }
            }).catch(error => {
              console.log(error)
            })
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.one-floor {
  margin-top: 50px;
}
.my-userAuthInfo {
  margin-top: 50px;
}
.row-box{
    background: #fff;
    padding: 30px;
    margin-bottom: 30px;
    min-height: 440px;
}
.my-goodsInfo {
    margin-top: 20px;
}
.success-info {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ivu-alert {
  text-align: center;
  padding: 0;
  height: 50px;
  line-height: 50px;
}
.pright {
  margin-right: 10px;
}
.pleft {
  margin-left: 10px;
}
.buy-item-user {
    height: 70px;
}
.home-container{
    width: 100%;
    height: auto;
}
a{
    color:#555;
}
.bv-example-row{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.demo-carousel img{
    width: 100%;
    height:auto;
}
.contain-title{
    text-align: center;
    padding: 10px 0;
}
.titleLine {
    color: #ce2c0c;
    font-size: 20px;
}
.ivu-card{
    margin-bottom: 25px;
}
.box-item>a{
    display: block;
}
.box-item>a>img{
    width: 100%;
    height: auto;
}
.box-item-text h5{
    font-size: 14px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding-top: 5px;
    height: 40px;
}
.box-item-text h5 a{
    color:#333;
}
.box-item-text h5 a:hover{
    text-decoration: none;
    color:#111;
}
.goods-item{
    display:flex;
    justify-content: space-between;
    align-items: flex-start;
}
.goods-price{
    color:#f30;
}
.goods-price-two{
    color:#fff;
    background-color: #fa4137;
    border:1px solid #fa4137;
    display: inline-block;
    border-radius: 5px;
    font-size: 14px;
    padding: 2px 10px;
}
.view-num{
    color:#5a5a5a;
    font-size: 11px;
}
.user-info{
    display:flex;
    justify-content: flex-start;
    align-items: flex-start;
}
.user-info img{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: 0 0 4px #e2e2e2;
    margin-right: 10px;
}
.user-info .user-name{
    display: inline-block;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color:#747474;
    margin-bottom: 0;
}
</style>
